<template>
  <el-container class="main_con" style="padding-bottom: 0px">
    <div class="setting">
      <div class="setting_body">
        <el-form size="medium" label-width="100px" ref="itemForm" :model="obj">
          <div class="setting_body_item">
            <div class="header">主题色设置</div>
            <!-- <el-form-item ></el-form-item> -->
            <el-form-item label="主题色选择">
              <div class="theme">
                <div class="theme-item" v-for="(item, i) in colorlist" v-bind:class="a_id == i ? 'active' : ''" @click="a_id = i">
                  <div class="theme-color">
                    <span class="theme-btn" :style="'background: ' + item.color"></span>
                    <span class="theme-btn subcolor" :style="'background: ' + item.subcolor"></span>
                  </div>
                  <div class="theme-text">{{ item.value }}</div>
                  <i class="iconfont icon-yes1 theme-choose"></i>
                </div>
              </div>
            </el-form-item>
            <el-form-item label="主题色色值" v-if="!colorlist[a_id].is_def">
              <div class="color-box">
                <div class="copy-text">
                  <div class="flex theme-color-tip">
                    <span class="theme-btn" :style="'background: ' + colorlist[a_id].color"></span>
                    <span class="text">{{ colorlist[a_id].color }}</span>
                  </div>
                </div>
                <div class="copy-text">
                  <div class="flex theme-color-tip">
                    <span class="theme-btn ml-20" :style="'background: ' + colorlist[a_id].subcolor"></span>
                    <span class="text">{{ colorlist[a_id].subcolor }}</span>
                  </div>
                </div>
              </div>
            </el-form-item>

            <el-form-item label="主题色色值" v-else>
              <div class="flex_div">
                <ColorPicker style="margin-right: 10px;" :name="'color'" :color="colorlist[a_id]"></ColorPicker>
                <ColorPicker :name="'subcolor'" :color="colorlist[a_id]"></ColorPicker>
              </div>

            </el-form-item>
            <el-form-item label="主题色色值" v-if="a_id < 7">
              <div class="theme_img">
                <img :src="require('@/assets/images/theme/theme_' + colorlist[a_id].num + '_1.jpg')" />
                <img :src="require('@/assets/images/theme/theme_' + colorlist[a_id].num + '_2.jpg')" />
                <img :src="require('@/assets/images/theme/theme_' + colorlist[a_id].num + '_3.jpg')" />
              </div>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <div class="setting_bootom"><el-button v-has size="medium" type="primary" @click="saveData">保存数据</el-button></div>
    </div>
  </el-container>
</template>
<script>
import ColorPicker from '@/components/ColorPicker/index.vue';
import {addSiteConfig, editSiteConfig, getSiteConfig} from '@/api/mall/setting';
export default {
  data() {
    return {
      obj: {
        type: 'theme',
        status: 1,
        configuration: {
          color: '#FF3C29',
          subcolor: '#fef0f0',
          is_def: false
        }
      },

      a_id: 0,
      colorlist: [
        {
          color: '#FF3C29',
          subcolor: '#fef0f0',
          value: '经典红',
          is_def: false,
          id: 0,
          num: 'a'
        },
        {
          color: '#F9D72A',
          subcolor: '#FFF9DA',
          value: '活力橙',
          is_def: false,
          id: 1,
          num: 'b'
        },
        {
          color: '#FB496F',
          subcolor: '#FEE2E4',
          value: '樱花粉',
          is_def: false,
          id: 2,
          num: 'c'
        },
        {
          color: '#19B038',
          subcolor: '#DCF1E1',
          value: '玛瑙绿',
          is_def: false,
          id: 3,
          num: 'd'
        },
        {
          color: '#8150F2',
          subcolor: '#ECE3FC',
          value: '魅力紫',
          is_def: false,
          id: 4,
          num: 'e'
        },
        {
          color: '#277CF4',
          subcolor: '#D2E6F9',
          value: '宝石蓝',
          is_def: false,
          id: 5,
          num: 'f'
        },
        {
          color: '#2A2A2E',
          subcolor: '#E8E9EF',
          value: '曜石黑',
          is_def: false,
          id: 6,
          num: 'g'
        },
        {
          color: '#FF3C29',
          subcolor: '#212121',
          value: '自定义',
          is_def: true,
          id: 7,
          num: 'a'
        }
      ]
    };
  },
  components: {
    ColorPicker
  },
  mounted() {
    this.getConfig('theme');
  },
  methods: {
    getConfig(type) {
      this.isLoading = true;
      getSiteConfig(type)
        .then(res => {
          this.isLoading = false;
          if (res.msg) {
            let configuration = res.msg.configuration;
            let a_id = configuration.id;
            this.colorlist[a_id] = configuration;
            this.a_id = a_id;
          }
        })
        .catch(e => {
          this.isLoading = false;
        });
    },

    //保存数据
    saveData() {
      this.$refs.itemForm.validate(valid => {
        if (valid) {
          this.obj.configuration = this.colorlist[this.a_id];
          editSiteConfig(this.obj)
            .then(res => {
              this.isLoading = false;
              this.getConfig('theme');
            })
            .catch(e => {
              this.isLoading = false;
            });
          // if (this.obj.update_time) {
          //   //更新

          // } else {
          //   //新增
          //   addSiteConfig(this.obj)
          //     .then(res => {
          //       this.isLoading = false;
          //       this.getConfig('theme');
          //     })
          //     .catch(e => {
          //       this.isLoading = false;
          //     });
          // }
        } else {
          //校验没通过
          return false;
        }
      });
    }
  }
};
</script>
<style type="text/css" lang="scss">
  .flex_div{
    display: flex;
  }
.setting {
  background: #fff;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 110px);

  .setting_body {
    flex-grow: 1;
    overflow-y: auto;
    //padding-top: 20px;

    .setting_body_item {
      .header {
        background: #e0e3e8;
        height: 40px;
        line-height: 40px;
        padding-left: 20px;
        margin-top: 20px;
        margin-bottom: 20px;
      }
    }
  }

  .setting_bootom {
    height: 60px;
    line-height: 60px;
    border-top: 1px solid #dcdfe6;
  }
}
.theme {
  display: flex;
  .theme-item {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
    border: 1px solid #e9edef;
    border-radius: 2px;
    padding: 10px 0;
    width: 70px;
    height: 70px;
    cursor: pointer;
    &.active {
      border: 1px solid #2d8cf0;
    }
    .theme-color {
      height: 24px;
      .theme-btn {
        position: relative;
        z-index: 1;
        display: inline-block;

        width: 30px;
        height: 24px;
      }
      .subcolor {
        position: relative;
        z-index: 0;
        margin-left: -6px;
      }
    }
  }
  .theme-text {
    margin-top: 10px;
    font-size: 12px;
    line-height: 16px;
  }
}
.color-box {
  display: flex;

  align-items: center;
  margin-top: 8px;
  cursor: pointer;
  .theme-color-tip {
    display: flex;
  }
  .theme-btn {
    display: inline-block;
    // border-radius: 50%;
    width: 20px;
    height: 20px;
    background: #8150f2;
  }
  .ml-20 {
    margin-left: 20px;
  }
  .text {
    margin-left: 4px;
    font-size: 14px;
    line-height: 20px;
    color: #000000;
  }
}
.theme_img{
  img{
    width: 200px;
    margin-right: 50px;
  }
}
</style>
